<template>
    <div>
        <div class="category-header">
            <router-link tag="span" to="/index/welfare"><svg t="1640164914293" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="64511" width="16" height="16"><path d="M744.3372563 1017.13692445c11.1289837 0 22.2701037-4.2477037 30.76551111-12.74311112 16.99081482-16.99081482 16.99081482-44.54020741 0-61.51888592L345.02883555 512.80099555 775.10276741 82.7392c16.99081482-16.97867852 16.99081482-44.54020741 0-61.51888592-16.99081482-16.99081482-44.52807111-16.99081482-61.51888593 0L252.74443852 482.04762075a43.51469037 43.51469037 0 0 0 0 61.53102222l460.83944296 460.81517036c8.48327111 8.49540741 19.62439111 12.74311111 30.75337482 12.74311112z" fill="#ffffff" p-id="64512"></path></svg></router-link>
            <div class="icont-header">每日任务</div>
        </div>

        <div class="task-list">
            <div class="task-list-content">
                <div class="task-txt">
                    <span>登录红袖M站</span>
                    <p>每天来这里,享受快乐阅读时光</p>
                </div>
                <div class="task-bottom" v-show="!login">未完成</div>
                <div class="task-bottom-nav" v-show="login&&!logintask" @click="getlogintask">领取奖励</div>
                <div class="task-bottom-val" v-show="logintask">已领取</div>
            </div>
            <div class="task-list-content">
                <div class="task-txt">
                    <span>加书到书架</span>
                    <p>选择一本自己喜欢的书加入到书架</p>
                </div>
                <div class="task-bottom" v-show="!likebooklistchoose">未完成</div>
                <div class="task-bottom-nav" v-show="likebooklistchoose&&!bookshelftask" @click="getBookShelfTask">领取奖励</div>
                <div class="task-bottom-val" v-show="bookshelftask">已领取</div>
            </div>
            <div class="task-list-content">
                <div class="task-txt">
                    <span>发表评论</span>
                    <p>读过的书籍里,留下自己的脚印</p>
                </div>
                <div class="task-bottom">未完成</div>
            </div>
            <div class="task-list-content">
                <div class="task-txt">
                    <span>账户充值</span>
                    <p>账户满满的,好书想买就买</p>
                </div>
                <div class="task-bottom" v-show="!bookrecharge">未完成</div>
                <div class="task-bottom-nav" v-show="bookrecharge&&!bookrechargetask" @click="getBookRecharge">领取奖励</div>
                <div class="task-bottom-val" v-show="bookrechargetask">已领取</div>
            </div>
            <div class="task-list-content">
                <div class="task-txt">
                    <span>订阅超过3章</span>
                    <p>购买喜欢的章节,支持正版阅读</p>
                </div>
                <div class="task-bottom">未完成</div>
            </div>
            <div class="task-list-content">
                <div class="task-txt">
                    <span>投推荐票</span>
                    <p>每天给喜欢的书籍送上一份鼓励</p>
                </div>
                <div class="task-bottom" v-show="recommen==10">未完成</div>
                <div class="task-bottom-nav" v-show="recommen==0&&!recommentask" @click="getRecommenTask">领取奖励</div>
                <div class="task-bottom-val" v-show="recommentask">已领取</div>
            </div>
            <div class="task-list-content">
                <div class="task-txt">
                    <span>投月票</span>
                    <p>为了喜欢的书籍送上宝贵的月票吧</p>
                </div>
                <div class="task-bottom" v-show="mount==10">未完成</div>
                <div class="task-bottom-nav" v-show="mount==0&&!mounttask" @click="getMountTask">领取奖励</div>
                <div class="task-bottom-val" v-show="mounttask">已领取</div>
            </div>
            <div class="task-list-content">
                <div class="task-txt">
                    <span>送礼物</span>
                    <p>犒劳以下作者大大吧</p>
                </div>
                <div class="task-bottom">未完成</div>
            </div>

            
        </div>
    </div>
</template>

<script>
export default {
    props:['login','logintask','likebooklistchoose','bookshelftask','bookrecharge','bookrechargetask','recommen','recommentask','mount','mounttask'],
    data(){
        return {
            
        }
    },
    methods:{
        
        //获取登陆奖励
        getlogintask(){
            this.$emit('get-login-task',0)
        },
        //获取添加书籍奖励
        getBookShelfTask(){
            this.$emit('get-book-shelf-task',0)
        },

        //获取充值奖励
        getBookRecharge(){
            this.$emit('get-book-recharge',0)
        },

        //获取投推荐票奖励
        getRecommenTask(){
            this.$emit('get-recommentask',0)
        },

        //获取投月票奖励
        getMountTask(){
            this.$emit('get-mounttask',0)
        }
    }
    
}
</script>

<style lang="less" scoped>
.category-header{
    width: 100%;
    height: 44px;
    background-color: #FC0E50;
    display: flex;
    align-items: center;
    span{
        display: block;
        width: 44px;
        height: 44px;
        text-align: center;
        line-height: 44px;
    }
    .icont-header{
        color: white;
        margin: auto;
        padding-right: 44px;
    }
}

//每日任务列表
.task-list{
    width: 358px;
    margin: auto;
    .task-list-content{
        width: 358px;
        height: 86px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #f0f1f2;
        .task-txt{
            height: 54px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            span{
                font-size: 16px;
                font-weight: bold;
                color: #000;
            }
            p{
                font-size: 0.875rem;
                color: #808080;
            }
        }
        .task-bottom{
            width: 82px;
            height: 32px;
            border-radius: 32px;
            line-height: 32px;
            text-align: center;
            border: 1px solid #F01742;
            color: #F01742;
        }
        .task-bottom-nav{
            width: 82px;
            height: 32px;
            border-radius: 32px;
            line-height: 32px;
            text-align: center;
            border: 1px solid #F01742;
            color: white;
            background-color: #F01742;
        }
        .task-bottom-val{
            width: 82px;
            height: 32px;
            border-radius: 32px;
            line-height: 32px;
            text-align: center;
            color: #D0D0D0;
            border: 1px solid #D0D0D0;
        }
        
    }
}

</style>